<template>
  <div class="setup-wrapper">
    <BaseTable :columns="tableColumns" :tableData="tableData" :withPagination="true" :pagination="pagination">
            <template #header>
                <div class="header-btn">
                    <el-button type="primary" @click="addSetup()">添加设置</el-button>
                </div>
            </template>
    </BaseTable>
    <el-dialog title="更新设置" v-model="dialogFormVisible">
        <el-form :model="formData" label-width="120px">
            <el-form-item label="可分配资金(万)">
                <el-input v-model="formData.monney"></el-input>
            </el-form-item>
            <el-form-item label="参与人数">
                <el-input v-model="formData.joinNum"></el-input>
            </el-form-item>
            <el-form-item label="入围人数">
                <el-input v-model="formData.intoNum"></el-input>
            </el-form-item>
            <el-form-item label="入围限制">
                <span>
                    销售
                    <el-input v-model="formData.intoInfo" style="width: 50px"></el-input>
                    张，获得一个名额
                </span>
            </el-form-item>
            <el-form-item label="有效日期">
               <el-date-picker
                    v-model="formData.userfulDate"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="changeSetup()">确 定</el-button>
            </span>
        </template>
    </el-dialog>
  </div>
</template>

<script>
import BaseTable from "@/components/BaseTable.vue";
import { getSetup, changeSetup } from "@/api/bigCustomer";
import moment from "moment";
export default {
    name: "setup",
    components: {
        BaseTable
    },
      data(){
        return {
            date: null,
            tableColumns: [
                {
                    title: "可分配资金",
                    key: "monney",
                },
                {
                    title: "参与人数",
                    key: "joinNum",
                },
                {
                    title: "入围人数",
                    key: "intoNum",
                },
                {
                    title: "有效期",
                    key: "userfulDate",
                },
                {
                    title: "添加时间",
                    key: "addDate",
                },
                {
                    title: "结束时间",
                    key: "endDate",
                },
                {
                    title: "操作",
                    key: "operate",
                    operate: [
                        {
                            tag: "el-button",
                            text: "编辑",
                            click: (index, row) => {
                                this.dialogFormVisible = true;
                                this.formData = {
                                    ...row
                                };
                            },
                            props: {
                                type: "primary",
                            }
                        },
                        {
                            tag: "el-button",
                            text: "删除",
                            props: {
                                type: "dander",
                                click: (index, row) => {
                                    // TODO： 删除
                                }
                            }
                        }
                    ]
                }
            ],
            tableData: [],
            pagination: {
                pageSize: 20,
                total: 0,
                
            },
            dialogFormVisible: false,
            formData: {}
        }
    },
    mounted(){
        this.getSetUp()
    },
    methods: {
        getSetUp(){
            getSetup().then(res => {
                if(res.code === 200){
                    this.tableData = (res?.data || []).map(item => {
                        return {
                            ...item,
                            addDate:item?.addDate ? moment(Number(item?.addDate)).format("YYYY-MM-DD") : moment().format("YYYY-MM-DD")
                        }
                    })
                    this.pagination = {
                        ...this.pagination,
                        total: this.tableData.length
                    }
                    return;
                }
                this.$message.error("加载数据失败")
            })
        },
        changeSetup(){
            changeSetup(this.formData).then(res => {
                if(res.code === 200){
                    this.$message.success("更新成功");
                    this.formData = {};
                    this.dialogFormVisible = false;
                    return;
                }
                this.$message.error(err?.message || "更新失败");
            }).catch(err => {
                this.$message.error(err?.message || "更新失败");
                this.formData = {};
                this.dialogFormVisible = false;
            })
        },
        addSetup(){
            this.formData = {};
            this.dialogFormVisible = true;
        }
    }
}
</script>

<style lang="scss">
.setup-wrapper {
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #FFF;
    padding: 16px 24px;
    box-sizing: border-box;
}
</style>